<!DOCTYPE HTML>

<html>
<head>
<title>Worker requestAnimationFrame with WebGLcontext after GPU crash</title>

<script id="worker" type="text/worker">
self.onmessage = msg => {
  const canvas = msg.data.canvas;
  const gl = canvas.getContext('webgl');
  let restored = false;
  canvas.addEventListener('webglcontextlost', evt => {
    self.postMessage("context lost");
    // To allow restore event to be fired:
    evt.preventDefault();
  });
  canvas.addEventListener('webglcontextrestored', evt => {
    restored = true;
    self.postMessage("context restored");
  });
  self.postMessage("setup complete");

  function animate() {
    if (restored) {
      gl.clearColor(0, 1, 0, 1);
    } else {
      gl.clearColor(1, 0, 0, 1)
    }
    gl.clear(gl.COLOR_BUFFER_BIT);
    self.postMessage("animation frame");
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}
</script>

<script>
// Test that a WebGL rAF loop keeps running after recovering from a context loss.
// Test will timeout if animation fails to resume.

function UnexpectedMessage(state, msg) {
  console.log(`Unexpected message '${msg}' received while in state '${state}'`);
  window.domAutomationController.send('FAILED');
}

window.onload = () => {
  const worker_blob = new Blob([document.getElementById("worker").textContent]);
  const worker = new Worker(URL.createObjectURL(worker_blob));
  let state = "init";
  let frames_after_restore = 0;

  worker.onmessage = evt => {
    // Expected sequence (state: expected message):
    //
    // "init": expect to receive "setup complete" once
    // "ready": expect to receive "animation frame" x1 -> request gpu crash
    // "expecting crash": receive "animation frame" (any count), then "context lost" once
    // "expecting restore": receive "animation frame" (any count), then "context restored" once
    // "recover": receive 5+ "animation frame".

    switch(state) {
      case "init":
        if (evt.data == "setup complete") {
          state = "ready";
        } else {
          UnexpectedMessage(state, evt.data);
        }
        break;
      case "ready":
        if (evt.data == "animation frame") {
          state = "expecting crash";
          // send message that test is ready for GPU process crash
          window.domAutomationController.send('LOADED');
        } else {
          UnexpectedMessage(state, evt.data);
        }
        break;
      case "expecting crash":
        if (evt.data == "animation frame") {
          break;
        }
        if (evt.data == "context lost") {
          state = "expecting restore";
        } else {
          UnexpectedMessage(state, evt.data);
        }
        break;
      case "expecting restore":
        if (evt.data == "animation frame") {
          break;
        }
        if (evt.data == "context restored") {
          state = "recover";
        } else {
          UnexpectedMessage(state, evt.data);
        }
        break;
      case "recover":
        if (evt.data == "animation frame") {
          // Wait for enough frames to pass to ensure the pipeline
          // is not stalled.
          if (++frames_after_restore == 5)
            window.domAutomationController.send('SUCCESS');
        } else {
          UnexpectedMessage(state, evt.data);
        }
        break;
    }
  }
  let offscreen = document.getElementById('c').transferControlToOffscreen();
  worker.postMessage({
      canvas: offscreen
  }, [offscreen]);
}
</script>

</head>
<body>
<canvas id="c" width="300" height="300" class="nomargin" style="position:absolute; top:0px; left:0px;"></canvas>
</body>
</html>
